<!--
 * @Author: wanlixin
 * @Date: 2019-10-04 16:52:53
 * @LastEditors: sylvanas
 * @LastEditTime: 2019-10-28 21:07:45
 * @Description: 
 -->
<template>
  <grimm-page type="timeline-view" title="TimeLine">
    <div slot="content" style="margin-left: 10px;">
      <grimm-timeline :color="color">
        <grimm-timeline-item v-for="(item, index) in data" :key="index">
          <div class="title">2019年{{index+1}}月</div>
          <div class="description">{{item.desc}}-{{index+1}}</div>
        </grimm-timeline-item>
      </grimm-timeline>
    </div>
  </grimm-page>
</template>
<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  // grimm-timeline 会导致栈溢出，待发掘
  name: 'grimm-timelinee',
  components: {
    GrimmPage,
  },
  data() {
    return {
      color: '#48C16A',
      data: [
        {
          desc:
            '描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述',
        },
        {
          desc:
            '描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述',
        },
        {
          desc:
            '描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述',
        },
        {
          desc:
            '描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述',
        },
        {
          desc:
            '描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述,描述描述描述描述描述描述描述描述',
        },
      ],
    };
  },
};
</script>
<style lang="stylus" >
.description {
  color: #999;
  font-size: 12px;
}
</style>